<!--
 * @Description: 雷达图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020年8月31日 14:07:44
 * @LastEditTime: 2020-09-04 09:13:41
-->
<template>
    <ScreenContainer class="radarCharts demo">
        <!-- 标准单线雷达图 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar1"
                        title="标准单线雷达图"
                        showAxisLabel />
        </div>
        <!-- 标准多线雷达图 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar2"
                        title="标准多线雷达图"
                        showLegend />
        </div>
        <!-- demo1 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar2"
                        title="demo1"
                        :colors="['#ff5722', '#f9cf67', '#e92b77']"
                        nameColor="#00c2ff"
                        splitLineColor="#3392ba"
                        splitAreaColor="rgba(0,0,0,0)"
                        axisLineColor="#3392ba"
                        :splitNumber="4"
                        areaFill
                        showLegend />
        </div>
        <!-- 配置项demo2 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar1"
                        title="demo2"
                        :colors="['#f9cf67']"
                        nameColor="#00c2ff"
                        splitLineColor="rgba(0,0,0,0)"
                        :splitAreaColor="['rgba(0,0,0,0)']"
                        axisLineColor="#3392ba"
                        :splitNumber="4"
                        areaFill />
        </div>
        <!-- 配置项demo3 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar1"
                        title="demo3"
                        :colors="['#f9cf67']"
                        nameColor="#f9cf67"
                        splitLineColor="rgba(0,0,0,0)"
                        :splitAreaColor="['rgba(222,134,85,.8)','rgba(222,134,85,.6)','rgba(222,134,85,.4)','rgba(222,134,85,.2)']"
                        axisLineColor="rgba(0,0,0,0)"
                        :splitNumber="4"
                        areaFill />
        </div>
        <!-- 显示值标签 -->
        <div class="box">
            <radarChart :apiMethod="getData"
                        apiParam="getRadar1"
                        title="显示值标签"
                        :colors="['#f9cf67']"
                        nameColor="#f9cf67"
                        splitLineColor="rgba(0,0,0,0)"
                        :splitAreaColor="['rgba(222,134,85,.8)','rgba(222,134,85,.6)','rgba(222,134,85,.4)','rgba(222,134,85,.2)']"
                        axisLineColor="rgba(0,0,0,0)"
                        :splitNumber="4"
                        areaFill
                        label />
        </div>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import radarChart from '@/components/charts/default/radarChart.vue' //饼图
export default {
    name: 'radarCharts',
    components: {
        radarChart,
        ScreenContainer,
    },
    data() {
        return {
            getData, //api方法
        }
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 33.3333%;
        height: 50%;
    }
}
</style>
